<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="hello-vue" class="demo">
  {{ val }}
</div>
<div id="app">

</div>

<template id="app2">
  <div>
    {{val}}
    <button @click="fn1">父组件按钮1</button>
    <counter aa='22' @bb="sun_fun"></counter>
    <div>
      <p> original:{{original.count}}</p>
      <p> copy:{{copy.count}}</p>
      <button @click="fn2">++++++++++</button>
    </div>
  </div>
</template>


<script>

  //组件
  const Counter={
    template:`<div>2222 <button @click="s_btn">按钮1</button></div>`,
    //用context接收父元素的值时候得注释掉 props
  /*  props:{
      aa:{type:String}
    },  */
    setup(props,context){
      //1.可以从props拿到子组件的值
      // console.log(props)
/////////////////****//////////////////////////
      //2.可以从context拿到子组件的值
      let {attrs,emit} =context
      let s_btn=()=>{
        emit('bb')
      }
       
     /*  console.log('context',context)
      console.log('context',attrs.aa) */
      return {
        s_btn
      }
    },
  }
  //父组件
const HelloVueApp = {
  template:"#app2",
  components:{Counter},
  setup(){
    let val="测试"
   
    let fn1=()=>{
      val="我要改变测额,val没有加ref,所以不能直接改变视图"
      console.log(val)
    }
    let sun_fun=()=>{
      alert("我是子组件给的数据")
    }
    const original = Vue.reactive({ count: 0 })
    const copy = Vue.readonly(original)
    //个人总结，readonly的意义如果当前页面数据复制个copy，传到其他页面或者给全局变量，其他地方就不能直接对该数据修改，对数据源保护，
    // 通过 original 修改 count，将会触发依赖 copy 的侦听器
    let fn2=()=>{
      original.count++
      console.log("original.count",original.count)
      console.log("copy.count",original.count)
    }
    // 通过 copy 修改 count，将导致失败并出现警告
     copy.count++ // 警告: "Set operation on key 'count' failed: target is readonly."
    return {
      sun_fun,
      val,
      fn1,
      fn2,
      original,
      copy
    }
  }
/*   data() {
    return {
      message: 'Hello Vue1!!'
    }
  } */
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>